import React from 'react';
import { Image } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import './row.scss'
function ModuleListRow({ data }) {
   console.log('---data---', data);
   let navigate = useNavigate();
   let match = /((uuid)=([\w]+)).((&rankType)=([\w]+))/g;
   let navFun = (k) => {
      //   console.log(k)
      let tempParam = match.exec(k.url)
      console.log(tempParam[3]);
      console.log(tempParam[6]);
      navigate("/Rank?uuid=" + tempParam[3] + "&rankType=" + tempParam[6])
   }
   return (
      <div className='city'>
         <p className='city_book'>{data.name}</p>
         <ul className='city_book_list'>
            {data.list.map((item, index) => (
               <li className='city_book_item' key={index}
                  onClick={() => navigate("/book?id=" + item.id + "&title=" + item.title)}
               >
                  <Image
                     src={item.cover + "?imageView&thumbnail=240y336"}
                     width={26 + "vw"}
                     height={26 * 1.4 + "vw"}
                     style={{ borderRadius: 4 }}
                     fit="fill"
                     lazy={true}
                  />
                  <p className='item_right'>{item.title}</p>
               </li>
            ))}
         </ul>
         <div className="flag_state"
            onClick={() => navFun(data.more)}
         >
            <p className='arrow_txt'>{data.more.name}</p>
            <p className='arrow'></p>
         </div>
      </div>
   );
}

export default ModuleListRow;